<!DOCTYPE html>
<!--
  ~ Copyright (C) 2018 guomw.Inc. All rights reserved.
  ~ 项目名称： mysite
  ~ 文件名称： desktop.html
  ~ Date：18-10-11 下午5:16
  ~ Author: guomw
  -->

<html xmlns:th="http://www.thymeleaf.org" style="height: 100%">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>


    <link href="../../resource/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"
        th:href="@{/resource/css/bootstrap.min.css?v=3.3.5}" />
    <link href="../../resource/css/font-awesome.min.css?v=4.4.0" rel="stylesheet"
        th:href="@{/resource/css/font-awesome.min.css?v=4.4.0}" />
    <!-- Morris -->
    <link href="../../resource/css/plugins/morris/morris-0.4.3.min.css"
          th:href="@{/resource/css/plugins/morris/morris-0.4.3.min.css}" rel="stylesheet">
    <link href="../../resource/css/animate.min.css" rel="stylesheet" th:href="@{/resource/css/animate.min.css}" />
    <link href="../../resource/hotui/css/style.min-1.0.8.css" th:href="@{/resource/hotui/css/style.min-1.0.8.css}"
        rel="stylesheet">
    <link href="../../resource/hotui/css/hotui.style.override.css"
        th:href="@{/resource/hotui/css/hotui.style.override.css}" rel="stylesheet" />
    <link href="../../resource/hotui/js/plugins/datetimepick/css/daterangepicker.css"
        th:href="@{/resource/hotui/js/plugins/datetimepick/css/daterangepicker.css}" rel="stylesheet" />

    <!--openlayers地图css-->
    <link rel="stylesheet" type="text/css" href="../../resource/openLayers/css/ol.css"
        th:href="@{/resource/openLayers/css/ol.css}" />
    <!--树状图css-->
    <link href="../../resource/hotui/css/plugins/treeview/bootstrap-treeview.css" rel="stylesheet"
        th:href="@{/resource/hotui/css/plugins/treeview/bootstrap-treeview.css}" />
    <!--表格相关css-->
    <link href="../../resource/hotui/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet"
        th:href="@{/resource/hotui/css/plugins/dataTables/dataTables.bootstrap.css}" />
    <style>
        .dataTables_wrapper {
            padding-bottom: 0 !important;
        }

        .ol-viewport {
            /*完全透明*/
            /*background-color: rgba(0, 0, 0, 0);*/
            /*完全不透明*/
            /*background-color: rgba(0, 0, 0, 1);*/
        }
    </style>
</head>

<body class="gray-bg" style="height: 100%">
    <div style="position: relative;height: 100%">
        <input id="strId" name="strId" minlength="2" type="hidden" class="form-control" th:value="${strId}">
        <input id="strName" name="strName" minlength="2" type="hidden" class="form-control" th:value="${strName}">
        <input id="strUrl" name="strUrl" minlength="2" type="hidden" class="form-control" th:value="${data}">
        <input id="selectNo" name="selectNo" type="hidden">

        <!--地图主体-->
        <div id="map" class="map table-bordered" style="float:left;height:100%;width: 100%;">
        </div>
        <!--树状图-->
        <div id="treeview11" class="test col-sm-3 white-bg"
            style="width:15%;height:100%;position:absolute;top: 0;right: 0;overflow-y: auto;padding: 0 0 0 0;background-color: #f2f6e9;padding-left: 0;padding-right: 0;">
        </div>
        <!--地图弹框-->
        <div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-content">
            </div>
        </div>
        <!--设备表格-->
        <div class="ibox float-e-margins col-sm-6" style="position:absolute;bottom: 0;left: 0;margin-bottom: 0;">
            <div class="ibox-title">
                <h5>设备列表</h5>
                <div class="ibox-tools">
                    <button onclick="addConcealPointHelper.addConcealPoint()"
                        style="background-color: transparent;">新增隐藏点</button>
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content" style="max-height: 300px;overflow-y: scroll;">
                <table class="table table-striped table-bordered table-hover dataTables-example"
                    style="padding-bottom: 0;">
                    <thead>
                        <tr>
                            <th>设备编号</th>
                            <th>设备类型</th>
                            <th>设备位置</th>
                            <th>设备描述</th>
                            <th>是否节点</th>
                            <th>显示状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:onclick="treeHandler.addPonit([[${equ.no}]],[[${equ.typeCode}]])" class="gradeX"
                            th:each="equ,index:${list}">
                            <td th:text="${equ.no}"></td>
                            <td th:text="${equ.typeDesc}">TC002
                            </td>
                            <td th:id="${equ.no+'_address'}" th:text="${equ.address}">一号楼3楼</td>
                            <td th:text="${equ.desc}">一号楼3楼</td>
                            <td th:text="${equ.floorNode}">是否</td>
                            <td th:id="${equ.locatorId+'_show'}" th:text="${equ.show?'显示':'隐藏'}">是否</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div id="set_resident_modal" class="modal-content-tag">
        <form id="residentModelForm">
            <input id="latitude" name="latitude" type="hidden">
            <input id="longitude" name="longitude" type="hidden">
            <div class="form-group">
                <label class="col-sm-5">起点定位器:</label>
                <div class="col-sm-7">
                    <input id="startPoint" type="text" class="form-control" name="startPoint">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-5">终点定位器:</label>
                <div class="col-sm-7">
                    <input id="endPoint" type="text" class="form-control" name="endPoint">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-5">上个隐藏点:</label>
                <div class="col-sm-7">
                    <input id="lastPoint" type="text" class="form-control" name="lastPoint">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-5">下个隐藏点:</label>
                <div class="col-sm-7">
                    <input id="nextPoint" type="text" class="form-control" name="nextPoint">
                </div>
            </div>
        </form>
    </div>
    <!--基础框架js-->
    <script src="../../resource/js/jquery.min.js" th:src="@{/resource/js/jquery.min.js?20190316}"></script>
    <script src="../../resource/js/bootstrap.min.js" th:src="@{/resource/js/bootstrap.min.js?20190316}"></script>
    <script src="../../resource/hotui/js/hot/bootstrap.hot.extra-utils.js?20190316"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js?20190316}"></script>
    <script src="../../resource/hotui/js/hot/bootstrap.hot.extra-init.js?20190316?1234567"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-init.js?20190316(123)}"></script>
    <script src="../../resource/hotui/js/content.min.js" th:src="@{/resource/hotui/js/content.min.js}"></script>
    <script src="../../resource/hotui/js/plugins/datetimepick/js/moment.min.js"
            th:src="@{/resource/hotui/js/plugins/datetimepick/js/moment.min.js}" ></script>

    <script src="../../resource/hotui/js/plugins/datetimepick/js/daterangepicker.js"
        th:src="@{/resource/hotui/js/plugins/datetimepick/js/daterangepicker.js}"></script>
    <script src="../../resource/lib/bootstrap-datepicker/js/bootstrap-datepicker.min.js"
        th:src="@{/resource/lib/bootstrap-datepicker/js/bootstrap-datepicker.min.js}"></script>
    <script src="../../resource/lib/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-CN.min.js"
        th:src="@{/resource/lib/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-CN.min.js}"></script>

    <script src="../../resource/js/switchery.min.js" th:src="@{/resource/js/switchery.min.js}"></script>

    <script src="../../resource/js/plugins/validate/jquery.validate.min.js"
            th:src="@{/resource/js/plugins/validate/jquery.validate.min.js}" ></script>

    <script src="../../resource/js/plugins/validate/messages_zh.min.js"
            th:src="@{/resource/js/plugins/validate/messages_zh.min.js}"></script>

    <script src="../../resource/hotui/js/hot/bootstrap.hot.extra-validate.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-validate.js}"></script>

    <!--表格相关js-->
    <script src="../../resource/hotui/js/plugins/jeditable/jquery.jeditable.js"
        th:src="@{/resource/hotui/js/plugins/jeditable/jquery.jeditable.js}"></script>
    <script src="../../resource/hotui/js/plugins/dataTables/jquery.dataTables.js"
        th:src="@{/resource/hotui/js/plugins/dataTables/jquery.dataTables.js}"></script>
    <script src="../../resource/hotui/js/plugins/dataTables/dataTables.bootstrap.js"
        th:src="@{/resource/hotui/js/plugins/dataTables/dataTables.bootstrap.js}"></script>
    <!--树状图相关js-->
    <script src="../../resource/hotui/js/plugins/treeview/bootstrap-treeview.js"
        th:src="@{/resource/hotui/js/plugins/treeview/bootstrap-treeview.js}">
    </script>
    <!--地图相关js-->
    <script src="../../resource/openLayers/js/ol.js" th:src="@{/resource/openLayers/js/ol.js}"></script>
    <script src="../../resource/js/map/map.js" th:src="@{/resource/js/map/map.js}"></script>
    <script type="text/javascript" th:inline="javascript">
        const mapBase = /*[[@{/map}]]*/ "/map";
        const path = "http://" + document.location.host;
    </script>
    <script type="text/javascript">
        $(function () {
            var url = encodeURI('[[${data}]]');
            var strId = '[[${strId}]]';
            helper.init(strId, url);
            treeHandler.initTree();

        });
        $(document).ready(function () {
            $(".dataTables-example").dataTable();
        });
        var treeHandler = {
            //展示右边的社区树
            initTree: function () {
                $.ajax({
                    url: mapBase + "/structure/tree", //请求路径
                    type: "post", //请求方式
                    success: function (apiResult) {
                        $("#treeview11").treeview({
                            levels: 99,
                            color: "#708340",
                            data: apiResult.data,
                            onNodeSelected: function (e, o) {
                                if (o.url == "" || o.url == null) {
                                    return;
                                }
                                $("#strId").val(o.strId);
                                $("#strName").val(o.text);
                                var url = encodeURI(o.allUrl);
                                $("#strUrl").val(url);
                                helper.init(o.strId, url);
                            }
                        });

                    },
                    error: function () {

                    },
                    dataType: "json" //服务器响应的数据格式
                });
            },
            addPonit: function (no) {
                var selectNo = $("#selectNo").val();
                if (selectNo != '' && selectNo != null) {
                    $("#selectNo").val("");
                    //将图片变回鼠标
                    var url = encodeURI(path + "/resource/img/a1.jpg");
                    document.body.style.cursor = "url(" + url + ") 12 12,default";
                    return;
                }
                if ($("#" + no + "_address").text() == $("#strName").val()) {
                    alert("设备" + no + "已在该楼层");
                    return;
                }
                $("#selectNo").val(no);
                //将鼠标变为图片
                var url = encodeURI(path + "/resource/img/a1.jpg");
                document.body.style.cursor = "url(" + url + ") 12 12,crosshair";
            },

        };

        var setResidentModel = $("#set_resident_modal").modal("隐藏点", function () {
            $("#residentModelForm").submit();
        });

        var addConcealPointHelper = {
            addConcealPoint: function () {
                //将鼠标变为图片
                var url = encodeURI(path + "/resource/img/a1.jpg");
                document.body.style.cursor = "url('" + url + "') 12 12,crosshair";
                var key = map.on('click', function (evt) {
                    setResidentModel.show(function () {
                        //移除点击事件
                        ol.Observable.unByKey(key);
                        //将鼠标变会原样
                        var url = encodeURI(path + "/resource/img/a1.jpg");
                        document.body.style.cursor = "url(" + url + ") 12 12,default";
                        //保存数据功能
                        $("#residentModelForm").validateCallback(function () {
                            var startPoint = $("#startPoint").val();
                            var endPoint = $("#endPoint").val();
                            if (startPoint == "" || startPoint == null) {
                                hot.tip.error("起点定位器不能为空");
                                return;
                            }
                            if (endPoint == "" || endPoint == null) {
                                hot.tip.error("终点定位器不能为空");
                                return;
                            }
                            var requestData = {
                                structureId: $("#strId").val(),
                                longitude: evt.coordinate[0],
                                latitude: evt.coordinate[1],
                                lastPoint: $("#lastPoint").val(),
                                startPoint: startPoint,
                                endPoint: endPoint,
                                nextPoint: $("#nextPoint").val(),
                            };
                            $.ajax({
                                url: "/equipment/save/conceal/point", //请求路径
                                type: "post", //请求方式
                                data: requestData, //请求参数
                                success: function (apiResult) {
                                    if (apiResult.resultCode == 2000) {
                                        helper.init($("#strId").val(), $(
                                            "#strUrl").val());
                                        addConcealPointHelper
                                            .initConcealPoint($("#strId")
                                                .val());
                                        jsHelper.showPhop();
                                        //将图片变回鼠标
                                        var url = encodeURI(path +
                                            "/resource/img/a1.jpg");
                                        document.body.style.cursor =
                                            "url(" + url +
                                            ") 12 12,default";
                                        setResidentModel.hide();
                                    } else {
                                        hot.tip.error(apiResult.resultMsg);
                                    }
                                },
                                error: function () {

                                },
                                dataType: "json" //服务器响应的数据格式
                            });
                        });
                    });
                });

            },
            showConcealPoint: function (item) {
                var x = item.longitude - 0;
                var y = item.latitude - 0;
                var anchor = new ol.Feature({
                    geometry: new ol.geom.Point([x, y])
                });
                // 设置样式，在样式中就可以设置图标
                anchor.setStyle(new ol.style.Style({
                    image: new ol.style.Icon({
                        src: path + '/resource/map/icon/icon1.png',
                        anchor: [0.5, 0.5],
                        crossOrigin: 'anonymous',
                        size: [10, 10]
                    }),

                }));
                anchor.setId(item.id);
                anchor.setProperties({
                    type: -1,
                    id: item.id,
                    startPoint: item.startPoint,
                    endPoint: item.endPoint,
                    lastPoint: item.lastPoint,
                    nextPoint: item.nextPoint
                });
                // 添加到之前的创建的layer中去
                layerPop.getSource().addFeature(anchor);
            },
            initConcealPoint: function (strId) {
                var requestData = {
                    strId: strId,
                };
                $.ajax({
                    url: "/equipment/conceal/point/strId", //请求路径
                    type: "post", //请求方式
                    data: requestData, //请求参数
                    success: function (apiResult) {
                        if (apiResult.resultCode === 2000) {
                            $.each(apiResult.data, function (index, item) {
                                addConcealPointHelper.showConcealPoint(item)
                            })
                        }
                    },
                    error: function () {

                    },
                    dataType: "json" //服务器响应的数据格式
                })
            },
            deleteConcealPoint: function (id) {
                //ajax删除隐藏点
                $.ajax({
                    url: "/equipment/delete/conceal/point", //请求路径
                    type: "post", //请求方式
                    data: {
                        id: id
                    }, //请求参数
                    success: function () {
                        var element = popup.getElement();
                        $(element).popover('destroy');
                        //                    var feature = layerPop.getSource().getFeatureById(id);
                        //                    layerPop.getSource().removeFeature(feature);
                        //                    addConcealPointHelper.initConcealPoint($("#strId").val());
                        helper.init($("#strId").val(), $("#strUrl").val());
                    },
                    error: function () {},
                    dataType: "json" //服务器响应的数据格式
                })

            },
        };
    </script>
</body>

</html>